기본 할 일 관리에 새 작업을 만들고 여는 실행 도구 모음 버튼을 추가합니다.

코드 노트 준비

프런트엔드 JavaScript 코드 노트를 만들고 속성에 #run=frontendStartup을 지정합니다.

전체 코드

api.addButtonToToolbar({
	title: "새 할 일",
    icon: "task",
    shortcut: "alt+n",
    action: async () => {
    	const taskNoteId = await api.runOnBackend(() => {
        	const todoRootNote = api.getNoteWithLabel("taskTodoRoot");
            const resp = api.createTextNote(todoRootNote.noteId, "새 할 일", "")           
            return resp.note.noteId;
        });
        
        await api.waitUntilSynced();
        await api.activateNewNote(taskNoteId);
    }
});

확인

시작할 때 실행하도록 지정했으므로 애플리케이션을 새로고침하면 버튼이 나타납니다.

코드 설명

api.addButtonToToolbar({
	title: "새 할 일",
    icon: "task",
    shortcut: "alt+n",
    action: async () => {
    	// [...]
    }
});

프런트엔드 API로 실행 도구 모음에 버튼을 추가합니다. 제목과 bx- 접두사를 제외한 아이콘 이름 및 선택적인 단축키를 지정합니다. action은 클릭할 때 실행할 함수입니다.

const taskNoteId = await api.runOnBackend(() => {
    // 아래에서 설명하는 백엔드 처리입니다.           
    return resp.note.noteId;
});

노트 생성은 서버의 역할이므로 백엔드에서 실행합니다. 반환한 노트 ID는 프런트엔드에서 받을 수 있습니다.

const todoRootNote = api.getNoteWithLabel("taskTodoRoot");

#taskTodoRoot 라벨로 할 일 관리의 저장 위치를 찾습니다. 대상이 없으면 null일 수 있지만 이 기본 예제에는 오류 처리가 생략되어 있습니다.

const resp = api.createTextNote(todoRootNote.noteId, "새 할 일", "")

첫 번째 인수는 상위 노트 ID입니다. 두 번째는 새 할 일이라는 제목이며 세 번째는 빈 본문입니다.

await api.waitUntilSynced();

서버에서 만든 노트가 프런트엔드에도 반영될 때까지 기다립니다.

await api.activateNewNote(taskNoteId);

생성된 노트의 ID로 새 노트를 엽니다.